<template>
  <div class="talent_fans_details">
    <div class="tfd_fans_look" v-if="category.length">
      <div class="tfd_look_title">
        <div class="tfd_title_box">
          <div class="tfd_line"></div>
          <div class="tfd_text">粉丝概览</div>
        </div>
      </div>
      <template v-if="!showPageVip">
        <!-- <div class="fans_ratio_box" v-if="!lookLoading">
          <div class="fans_ratio_item">
            <img class="ratio_img1" src="@/assets/one/girlTwo.png" alt />
            <div class="ratio_text">{{ TopData.gender ? TopData.gender : "--" }}</div>
          </div>
          <div class="fans_ratio_item">
            <img class="ratio_img2" src="@/assets/one/AgeProportion.png" alt />
            <div class="ratio_text">{{ TopData.age ? TopData.age : "--" }}</div>
          </div>
          <div class="fans_ratio_item">
            <img class="ratio_img3" src="@/assets/one/DqProportion.png" alt />
            <div class="ratio_text">{{ TopData.province ? TopData.province : "--" }}</div>
          </div>
        </div>
        <van-loading
          style="padding: 2.5rem; box-sizing: border-box"
          class="loading"
          v-if="lookLoading"
          type="spinner"
          :vertical="true"
        /> -->
        <div class="tfd_goods_top3">
          <div class="tfd_top3_item" v-if="category.length">
            <div class="top3_btn_title">偏好商品类目TOP3</div>
            <div class="top3_btn_box">
              <!-- <div
                class="top3_btn_item"
                v-for="(item, index) in category"
                :key="index"
              >
                {{ item }}
              </div>-->
              <!-- 进度条显示偏好商品类目 -->
              <div class="box-wrap" v-for="(item, index) in category" :key="index">
                <div class="name">{{item.name}}</div>
                <div class="box-inline">
                  <div class="box-wrap-top">
                    <div class="top-left" :style="{ width:leftWidth(item.value) }"></div>
                  </div>
                  <div class="bottom-left">{{ item.value + "%" }}</div>
                </div>
              </div>
              <!-- <div class="top3_btn_item">零食食品</div>
              <div class="top3_btn_item">女装/男鞋</div>-->
            </div>
          </div>
          <div class="tfd_top3_item" v-if="brand.length != 0">
            <div class="top3_btn_title">偏好商品品牌TOP3</div>
            <div class="top3_btn_box">
              <!-- <div class="top3_btn_item" v-for="(item, index) in brand" :key="index">{{ item }}</div> -->
              <!-- <div class="top3_btn_item">零食食品</div>
              <div class="top3_btn_item">女装/男鞋</div>-->
              <div class="box-wrap" v-for="(item, index) in brand" :key="index">
                <div class="name">{{item.name}}</div>
                <div class="box-inline">
                  <div class="box-wrap-top">
                    <div class="top-left" :style="{ width: leftWidth(item.value)}"></div>
                  </div>
                  <div class="bottom-left">{{ item.value + "%" }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <noPower :minLeve="$store.state.userRoot[5][116].ownerMinLevel" v-if="showPageVip" />
    </div>

    <div class="tdf_fans_data">
      <div class="tfd_look_title">
        <div class="tfd_title_box">
          <div class="tfd_line"></div>
          <div class="tfd_text">粉丝数据</div>
        </div>
      </div>
      <div class="tab_btns">
        <span
          :class="{ active: dataSelect == 1 }"
          class="tfd_check_item"
          @click="dataSelect = 1"
        >粉丝趋势</span>
        <span
          :class="{ active: dataSelect == 2 }"
          class="tfd_check_item"
          @click="dataSelect = 2"
        >粉丝团趋势</span>
        <!-- <span
          :class="{ active: dataSelect == 3 }"
          class="tfd_check_item"
          @click="dataSelect = 3"
        >粉丝画像</span>
        <span
          :class="{ active: dataSelect == 4 }"
          class="tfd_check_item"
          @click="dataSelect = 4"
        >粉丝地域分布</span> -->
      </div>
      <!-- 粉丝趋势 -->
      <template v-if="!showPageVip">
        <div class="tfd_echarts_box" v-if="dataSelect == 1">
          <KCharts
            v-if="FansTEchart.xData.length != 0 && !tuanLoading1"
            :xData="FansTEchart.xData"
            :series1="FansTEchart.yData1"
            :series2="FansTEchart.yData2"
            name1="增量"
            name2="总量"
          />
          <van-loading
            style="padding-top: 2.5rem; box-sizing: border-box"
            class="loading"
            v-if="tuanLoading1"
            type="spinner"
            :vertical="true"
          />
          <div class="tfd_no_data" v-if="!FansTEchart.xData.length && !tuanLoading1">
            <img src="@/assets/one/zw.png" alt />
            <div class="zw">暂无数据</div>
          </div>
        </div>
        <!-- 粉丝团趋势 -->
        <div class="tfd_echarts_box" v-if="dataSelect == 2">
          <KCharts
            v-if="FsTEchart.xData.length != 0 && !tuanLoading2"
            :xData="FsTEchart.xData"
            :series1="FsTEchart.yData1"
            :series2="FsTEchart.yData2"
            name1="增量"
            name2="总量"
          />
          <van-loading
            style="padding-top: 2.5rem; box-sizing: border-box"
            class="loading"
            v-if="tuanLoading2"
            type="spinner"
            :vertical="true"
          />
          <div class="tfd_no_data" v-if="!FsTEchart.xData.length && !tuanLoading2">
            <img src="@/assets/one/zw.png" alt />
            <div class="zw">暂无数据</div>
          </div>
        </div>
      </template>
      <noPower :minLeve="$store.state.userRoot[5][116].ownerMinLevel" v-if="showPageVip" />
    </div>
    <div class="tfd_look_title mgt_40">
      <div class="tfd_title_box">
        <div class="tfd_line"></div>
        <div class="tfd_text">总体粉丝画像分析</div>
      </div>
    </div>
    <div class="tab_btns">
      <span
        :class="{ active: fansMapType == 1 }"
        class="tfd_check_item"
        @click="fansMapType = 1"
      >账号粉丝画像</span>
      <span
        :class="{ active: fansMapType == 2 }"
        class="tfd_check_item"
        @click="fansMapType = 2"
      >直播粉丝画像</span>
      <span
        :class="{ active: fansMapType == 3 }"
        class="tfd_check_item"
        @click="fansMapType = 3"
      >视频粉丝画像</span>
    </div>
    <template v-if="!showPageVip">
      <div class="analysis_container" v-if="pieGenderData.length || fansDiYu.length || fansxData.length">
        <!-- 粉丝画像 -->
        <div class="analysis_box">
          <h5>粉丝性别分布</h5>
          <div class="second_hua" v-if="pieGenderData">
            <GenderSpread :pieData="pieGenderData" />
          </div>
        </div>
        <div class="analysis_box">
          <h5>粉丝年龄分布</h5>
          <div class="tfd_echarts_box">
            <BarChart v-if="fansxData.length" :pieData="fansxData" pieName="粉丝年龄分布" />
            <van-loading
              style="padding-top: 2.5rem; box-sizing: border-box"
              class="loading"
              v-if="huaLoading"
              type="spinner"
              :vertical="true"
            />
            <div class="tfd_no_data" v-if="!fansxData.length && !huaLoading">
              <img src="@/assets/one/zw.png" alt />
              <div class="zw">{{ pieGenderData == 0 ? "暂无数据" : "粉丝年龄分布暂无数据" }}</div>
            </div>
          </div>
        </div>
        <!-- 粉丝地域分布 -->
        <div class="analysis_box">
          <h5>粉丝地域分布</h5>
          <div class="live_goods-roll" ref="chart2">
            <SideBarChart
              v-if="fansDiYu.length != 0 && !huaLoading"
              :pieData="fansDiYu"
              pieName="粉丝地域分布"
            />
            <van-loading
              style="padding-top: 2.5rem; box-sizing: border-box"
              class="loading"
              v-if="huaLoading"
              type="spinner"
              :vertical="true"
            />
            <div class="tfd_no_data" v-if="!fansDiYu.length && !huaLoading">
              <img src="@/assets/one/zw.png" alt />
              <div class="zw">{{ pieGenderData == 0 ? "暂无数据" : "粉丝地域分布暂无数据" }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="tfd_no_data mgt_60" v-else>
        <img src="@/assets/one/zw.png" alt />
        <div class="zw">{{fansMapType == 1 ? '该用户已启用隐私设置，无法查看粉丝分析' : fansMapType == 2 ? '该达人暂未开通直播，无法查看粉丝分析' : '该达人暂未发布视频，无法查看粉丝分析'}}</div>
      </div>
    </template>
    <noPower :minLeve="$store.state.userRoot[5][116].ownerMinLevel" v-if="showPageVip" />
  </div>
</template>

<script>
import KCharts from './EComponents/KChart.vue';
import BarChart from '@/component/BarChart.vue';
import SideBarChart from './EComponents/SideBarChart.vue';
import GenderSpread from '@/component/GenderSpread.vue';
export default {
  components: { KCharts, BarChart, SideBarChart, GenderSpread },
  props: {},
  data() {
    return {
      dataSelect: 1, //echarts切换tab

      FansTEchart: {
        xData: [],
        yData1: [],
        yData2: []
      },
      FsTEchart: {
        xData: [],
        yData1: [],
        yData2: []
      },
      pieGenderData: [],
      fansxData: [],
      fansDiYu: [],
      TopData: {},
      category: [],
      brand: [],

      lookLoading: false,
      huaLoading: false,
      tuanLoading1: false,
      tuanLoading2: false,
      showPageVip: false,
      fansMapType:1,
    };
  },
  computed: {},
  created() {
    this.getAuthorFansOverview();
    this.FansTrend();
    this.getFansPortrait();
  },
  mounted() {},
  watch: {
    fansMapType(){
      // this.getAuthorFansOverview();
      this.getFansPortrait();
    }
  },
  methods: {
    leftWidth(value) {
      return value + '%';
    },
    // 粉丝概览
    getAuthorFansOverview() {
      this.lookLoading = true;
      this.$axios
        .post('/api/Author/GetAuthorFansOverview', {
          AuthorId: this.$route.query.id,
          // fansType:this.fansMapType
        })
        .then(res => {
          if (res.data.code == 0) {
            this.TopData = res.data.data;
            this.category = res.data.data.category;
            this.brand = res.data.data.brand;
            this.lookLoading = false;
          }
          if (res.data.code == 1003) {
            this.showPageVip = true;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 粉丝/粉丝团  图表数据
    FansTrend() {
      this.tuanLoading1 = true;
      this.tuanLoading2 = true;
      if (Date.now()) {
        var endDate = this.timestamp(Date.now() / 1000, 'Y-M-D');
        var startDate = this.timestamp(Date.now() / 1000 - 86400 * 29, 'Y-M-D');
      }
      this.$axios
        .get('/api/Author/GetAuthorTrendThirty', {
          params: {
            authorId: this.$route.query.id,
            trendType: 1,
            star_time: startDate,
            end_time: endDate
          }
        })
        .then(res => {
          this.tuanLoading1 = false;
          if (res.data.code == 0) {
            res.data.data.dates.forEach((item, index) => {
              this.FansTEchart.xData.push(this.timestamp(item, 'M-D'));
              return this.FansTEchart.xData;
            });
            this.FansTEchart.yData1 = res.data.data.datas1;
            this.FansTEchart.yData2 = res.data.data.datas2;
          }
          if (res.data.code == 1003) {
            this.showPageVip = true;
          }
        })
        .catch(err => {
          console.log(err);
        });
      this.$axios
        .get('/api/Author/GetAuthorTrendThirty', {
          params: {
            authorId: this.$route.query.id,
            trendType: 2,
            star_time: startDate,
            end_time: endDate
          }
        })
        .then(res => {
          this.tuanLoading2 = false;
          if (res.data.code == 0) {
            res.data.data.dates.forEach((item, index) => {
              this.FsTEchart.xData.push(this.timestamp(item, 'M-D'));
              return this.FsTEchart.xData;
            });
            this.FsTEchart.yData1 = res.data.data.datas1;
            this.FsTEchart.yData2 = res.data.data.datas2;
          }
          if (res.data.code == 1003) {
            this.showPageVip = true;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 粉丝画像 ==> 粉丝地域分布
    getFansPortrait() {
      this.huaLoading = true;
      this.$axios
        .get('/api/author/GetFansPortrait', {
          params: {
            authorId: this.$route.query.id,
            fansType:this.fansMapType
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            this.huaLoading = false;
            this.pieGenderData = res.data.data.genderRate;
            this.fansxData = res.data.data.ageRate;
            this.fansDiYu = res.data.data.provinceRate;
            // this.$nextTick(() => {
            //   let cheight = this.fansDiYu.length<3? 3 * 45 :this.fansDiYu.length * 45;
            //   if (this.$refs.chart2) {
            //     this.$refs.chart2.style.height = cheight + "px";
            //     this.hasHeigth = 1;
            //   }
            // });
          }
          if (res.data.code == 1003) {
            this.showPageVip = true;
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~@/common/common.styl';
.talent_fans_details {
  padding: 0 0.4rem;
  padding-bottom: 0.666667rem;
}
.tfd_fans_look {
  margin-top: 0.5rem;
}
.tfd_look_title {
    display: flex;
    justify-content: space-between;
    .tfd_title_box {
      display: flex;
      align-items: center;
      .tfd_line {
        width: 0.08rem;
        height: 0.373333rem;
        background-color: #fd7f2c;
        border-radius: 0.04rem;
      }
      .tfd_text {
        font-size: 0.4rem;
        font-weight: 600;
        color: #222222;
        margin-left: 0.186667rem;
      }
    }
  }
.fans_ratio_box {
  margin-top: 0.733333rem;
  margin-bottom: 0.666667rem;
  .fans_ratio_item {
    display: flex;
    align-items: center;
    .ratio_img1 {
      width: 0.4rem;
      height: 0.426667rem;
    }
    .ratio_img2 {
      width: 0.413333rem;
      height: 0.426667rem;
    }
    .ratio_img3 {
      width: 0.346667rem;
      height: 0.426667rem;
      margin-right: 0.053333rem;
    }
    .ratio_text {
      font-size: 0.346667rem;
      color: #555555;
      margin-left: 0.266667rem;
    }
  }
  .fans_ratio_item:nth-child(2) {
    margin: 0.48rem 0;
  }
}
.tfd_goods_top3 {
  .tfd_top3_item {
    margin-top: 0.4rem;
    .top3_btn_title {
      font-weight: bold;
      margin-bottom: 0.32rem;
      font-size: 0.346667rem;
      color: #222222;
    }
    .top3_btn_box {
      // display: flex;
      // margin-top: 0.266667rem;
      // 进度条
      .box-wrap {
        width: 100%;
        margin-bottom: 0.293333rem;

        .name {
          font-size: 0.346667rem;
          color: #555;
        }
        .box-inline {
          margin-top: 0.24rem;
          display: flex;
          justify-content: space-between;
          .box-wrap-top {
            width: 80%;
            height: 12px;
            background-color: #f5f5f5;
            border-radius: 100px;
            overflow: hidden;
            .top-left {
              width: 10%;
              height: 100%;
              border-radius: 100px;
              // background-color: #1779ff;
              background-color: #f3ac62;
            }
          }
          .bottom-left {
            font-size: 0.346667rem;
            color: #888;
          }
        }
      }
      // 结束
      .top3_btn_item {
        width: 1.786667rem;
        height: 0.613333rem;
        line-height: 0.613333rem;
        text-align: center;
        background: #fff7ed;
        margin-right: 0.133333rem;
        font-size: 0.346667rem;
        color: #555555;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

.tdf_fans_data {
  margin-top: 0.5rem;
  .tfd_look_title {
    display: flex;
    justify-content: space-between;
    .tfd_title_box {
      display: flex;
      align-items: center;
      .tfd_line {
        width: 0.08rem;
        height: 0.373333rem;
        background-color: #fd7f2c;
        border-radius: 0.04rem;
      }
      .tfd_text {
        font-size: 0.4rem;
        font-weight: 600;
        color: #222222;
        margin-left: 0.186667rem;
      }
    }
  }
  // .fans_echarts_box{
  //   height: 5.4667rem;
  //   overflow: auto;
  // }
  .second_hua {
    height: 3rem;
  }
}
.tfd_echarts_box {
  height: 5.4667rem;
}
.live_goods-roll {
  margin-top: 0.6rem;
  height: 6.4rem;
}
.tab_btns{
  display: flex;
  margin-top: rem(30)
  span{
    box-sizing: border-box;
    flex:1;
    height: rem(60);
    font-size: rem(24);
    text-align: center;
    line-height: rem(60);
    border-radius: 4px;
    margin-right: rem(14);
    border: 1px solid #e5e5e5;
    background-color: #fff;
    color: #555;
    &:last-child{
      margin-right:0;
    }
    &.active{
      background-color: #fd7f2c;
      color: #fff;
      border-color: #fd7f2c;
    }
  }
}
.tfd_no_data {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img {
    width: 4rem;
    height: 2.8rem;
  }
  .zw {
    font-size: 0.346667rem;
    color: #888888;
  }
}
.mgt_60{
  margin-top:rem(60)
}
.mgt_40{
  margin-top:rem(40)
}
.analysis_container{

}
.analysis_box{
  h5{
    font-size: .3467rem;
    color: #222;
    margin: .5333rem 0 .3rem;
  }
}
</style>
